<template>
	<view class="repair">
		<u-sticky>
			<view class="logistics-input">
				<view class="input-right">
					<image src="../../static/serach.png" />
					<input v-model="queryParams.search" value="" type="text" placeholder="请输入名称"
						placeholder-style="font-size: 28rpx; font-weight: 500; color: #C6C7CB;" @input="search" />
					<image src="../../static/del.png" v-if="queryParams.search" @tap="clear"/>
				</view>
			</view>
		</u-sticky>
		<view style="padding-top: 0;">
			<system-card :propsList='dataList' v-if="dataList.length != 0"></system-card>
			<empty v-else></empty>
		</view>
	</view>
</template>

<script>
	import empty from "@/components/empty.vue"
	import systemCard from '@/components/systemCard.vue'
	export default {
		components: {
			systemCard,
			empty
		},
		data() {
			return {
				dataList: [],
				last_page: 1,
				queryParams: {
					page: 1,
					search: '',
					client: 2
				},
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			search() {
				this.queryParams.page = 1
				this.dataList = []
				this.getList()
			},
			clear(){
				this.queryParams.search=''
				this.queryParams.page = 1
				this.dataList = []
				this.getList()
			},
			/* 详情跳转 */
			jump_detail(id,warranty_id) {
				uni.navigateTo({
					url: `/pages/index/eleDetails?id=${id}&warranty_id=${warranty_id}`
				})
			},
			jump_Order(id) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}`
				})
			},
			/* 获取数据 */
			getList() {
				this.$https.post('/environment/getEnvironmentList', this.queryParams).then(res => {
					if (res.data.last_page > 0) {
						this.last_page = res.data.last_page
						this.dataList = this.dataList.concat(res.data.lists)
					}
				})
			}
		},
		onReachBottom() {
			if (this.queryParams.page != this.last_page) {
				this.queryParams.page++
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.logistics-input {
		display: flex;
		align-items: center;
		background-color: #f6f6fb;
		padding: 26rpx;

		.input-right {
			flex: 1;
			background-color: #ffffff;
			border-radius: 88rpx;
			padding: 0 20rpx;
			height: 80rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #c6c7cb;
			display: flex;
			align-items: center;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 20rpx;
			}

			input {
				flex: 1;
			}
		}
	}

	.repair {
		background-color: #f7f8fb;
		padding: 28rpx 0rpx;
		background-color: #f6f6fb;
		min-height: calc(100vh - 86rpx);
		padding-top: 0;

		view {
			padding: 26rpx;
		}
	}
</style>